<script setup lang="ts">
import APIDetails from '~/api/details'
import PaginationAlbum from '~/components/PaginationAlbum/index.vue'
import ItemVideo from '~/components/ItemVideo/index.vue'

definePageMeta({
    showSmallSearchBox: true,
})

const $router = useRouter()

const $route = useRoute()

const queryParams = ref<PageQuery>({
    page: 1,
    limit: 8
})
const loading = shallowRef<boolean>(false)

const list = ref<any[]>([])

const total = shallowRef<number>(0)

const category = ref<any>({})

const keys = ref<any>([])

function getSetlist() {
    const data = {
        id: $route.params.id,
        category_type: 'Video'
    }
    loading.value = true
    APIDetails.getSetlist(queryParams.value, data).then(({ data, total: count }) => {
        keys.value = data.key
        list.value = data.list
        category.value = data.category
        total.value = count
    }).finally(() => {
        loading.value = false
    })
}

function handleJumpVideoDetails(id: number) {
    window.open($router.resolve(`/video-details/${id}?categoryType=Video`).href, '_blank')
}

function handleJumpSearch(key: string) {
    window.open($router.resolve(`/video-search?q=${key}`).href, '_blank')
}

onMounted(() => {
    getSetlist()
})

</script>

<template>
    <div class="video-gather" v-loading="loading">
        <div class="introduce">
            <div class="bg">
                <img v-if="category.image" :src="category.image" alt="img">
            </div>
            <div class="content">
                <div class="left">
                    <img v-if="category.image" :src="category.image" alt="img">
                </div>
                <div class="right">
                    <div class="name">{{ category.title }}</div>
                    <div class="tags">
                        <div class="tag" v-for="item in keys" @click="handleJumpSearch(item)">{{ item }}</div>
                    </div>
                    <div class="text">共收录<span>{{ total }}</span>个视频</div>
                </div>
            </div>
        </div>
        <el-empty description="暂无内容" v-if="!list || list?.length == 0" />
        <div class="list">
            <div class="item" v-for="item in list" :key="item" @click="handleJumpVideoDetails(item.id)">
                <div class="frame">
                    <ItemVideo class="frame-item" :image="item.image" :sample="item.sample" />
                    <div class="title">{{ item.title }}</div>
                    <div class="frame-item" :style="{ backgroundImage: `url('${item.sprite}')` }"></div>
                </div>
            </div>
        </div>
        <div class="pagination">
            <PaginationAlbum :total="total" v-model:current-page="queryParams.page" :page-size="queryParams.limit"
                @get-list="getSetlist" />
        </div>
    </div>
</template>

<style lang="less" scoped>
.video-gather {
    .pagination {
        margin: 0 auto;
        width: 1260px;
    }

    .list {
        border-radius: 5px;
        position: relative;
        top: -30px;
        width: 1260px;
        margin: 0 auto;
        z-index: 5;
        grid-template-columns: repeat(4, 1fr);
        display: flex;
        flex-wrap: wrap;
        gap: 20px;

        .item {
            width: 300px;
            cursor: pointer;
            border-radius: 5px;
            overflow: hidden;

            .frame {
                background-color: red;
                height: 340px;
                position: relative;

                .frame-item {
                    height: 170px;
                    background-color: #e8e8e8;
                    background-size: cover;
                    background-position: center;
                }

                .title {
                    position: absolute;
                    left: 20px;
                    top: 125px;
                    height: 45px;
                    line-height: 45px;
                    font-size: 14px;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: #ffffff;
                }
            }
        }
    }

    .introduce {
        height: 300px;
        position: relative;
        overflow: hidden;

        .content {
            position: absolute;
            top: 38px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            width: 1160px;

            .right {
                margin-left: 62px;

                .text {
                    color: rgba(255, 255, 255, 1);
                    font-size: 14px;
                    margin-top: 18px;

                    span {
                        color: #3785F2;
                    }
                }

                .tags {
                    display: flex;
                    gap: 0 18px;
                    margin-top: 15px;

                    .tag {
                        padding: 0 10px;
                        height: 21px;
                        line-height: 21px;
                        border-radius: 5px;
                        background-color: rgba(255, 255, 255, 0.3);
                        color: rgb(255, 255, 255);
                        font-size: 14px;
                        text-align: center;
                        cursor: pointer;
                    }
                }

                .name {
                    color: rgba(255, 255, 255, 1);
                    font-size: 28px;
                }
            }

            .left {
                width: 300px;
                height: 200px;
                background-color: #eeeeee;
                border-radius: 5px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    object-fit: cover;
                }
            }
        }

        .bg {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 300px;
            filter: blur(20px);
            background-color: #858585;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}
</style>